<!--  -->
<template>
<div>
  <template>
      <el-table
        :data="tableData"
        style="width: 90%">
        <el-table-column
          prop="ABid"
          label="序列号"
          width="180"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="ApplyName"
          label="预约用户"
          width="180"
          align="center">
        </el-table-column>
        <el-table-column
          prop="BookName"
          label="预约书籍"
          width="180"
          align="center">
        </el-table-column>
        <el-table-column
          prop="UserAddress"
          label="用户地址"
          align="center">
        </el-table-column>
        <el-table-column
          prop="ApplyTime"
          label="预约时间"
          align="center">
        </el-table-column>
        <el-table-column
        align="center"
        label="预约状态"
        >
        <template slot-scope="scope">
          <span
            size="mini"
            align="center"
            v-if="scope.row.State == 0"
           >已同意申请</span>
          <span
            size="mini"
            align="center"
            v-if="scope.row.State == 1"
            style="color:red"
           >已拒绝申请</span>
          <el-button
            size="mini"
            v-if="scope.row.State >1"
            @click="handAgree(scope.$index, scope.row)">同意</el-button>
          <el-button
            size="mini"
            type="danger"
            v-if="scope.row.State > 1"
            @click="handRefuse(scope.$index, scope.row)">拒绝</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
   background
    layout="prev, pager, next"
    @current-change="handleCurrentChange"
    :page-count="pagecount"
    :current-page="page"
    class="fenye">
    </el-pagination>
    </template>
</div>
</template>

<script>
export default {
data() {
return {
    tableData:[],
    search:"",
     page:1,
    pagecount:0
}
},
//生命周期 - 创建完成（访问当前this实例）
created() {
    this.getApply(1)
},
//生命周期 - 挂载完成（访问DOM元素）
mounted() {

},
methods:{
    getApply(val){
           var url=`http://localhost:3000/GetApplyBook?page=${val}`
            this.axios.get(url).then(res=>{
            // console.log(res)
            this.tableData=res.data.results.datas
            this.page=res.data.results.page
          this.pagecount=res.data.results.pagecount
            })
    },
    handAgree(index, row) {
        var url=`http://localhost:3000/Agree?ABid=${row.ABid}`
            this.axios.get(url).then(res=>{
            if(res.data.code==200){
              // location.reload();
              this.getApply(this.page)
            }
            })
      },
    handRefuse(index, row) {
      var url=`http://localhost:3000/Refuse?ABid=${row.ABid}`
            this.axios.get(url).then(res=>{
            if(res.data.code==200){
              location.reload();
            }
            })
      },
      handleCurrentChange(val){
      // console.log("点击上一页或者下一页按钮",val)
      this.getApply(val)
    },
}
}
</script>
<style scoped>
/* @import url(); 引入css类 */
  span{
    color:rgb(64, 100, 34);
    font-weight: 600;
  }
  .fenye{
        display: block;
        position: absolute;
        bottom: 20px;
        margin-left: 33%;
    }
</style>